<template>
    <div class="header">
        {{ title }}
        <button @click="updateTitle">更新一下标题</button>
        <slot></slot>
    </div>
</template>

<script setup>
// 做成参数
// const props = defineProps(["title", "age"])
const props = defineProps({
    title: {
        type: String,
        default: "标题"
    },
    age: Number
})

setTimeout(() => {
    console.log(props.title);
    console.log(props.age);
}, 1000);


// 定义组件中的事件
// 定义组件中包含一个更新的事件
const emits = defineEmits(["updateTitle"])
function updateTitle() {
    console.log("子组件中执行");
    // 触发一下更新的事件
    emits('updateTitle', "子组件的数据包")
}
</script>

<style>
.header {
    height: 300px;
    background-color: lightblue;
}
</style>